<script setup>
import { RegionText, RegionFullText } from 'v-region'
import {useUserStore} from "@/stores/user.js";
import { ref, onMounted } from 'vue';
import { getUserShopAPI } from '@/apis/user.js';
import { getShopStatistics } from '@/apis/shopApi.js';
import { ElMessage } from 'element-plus';

const shopData = ref({
  shopName: '',
  shopAvatar: '',
  province: '',
  city: '',
  area: '',
  town: '',
  address: '',
  description: ''
});

const statistics = ref({
  totalProducts: 0,
  totalOrders: 0,
  totalRevenue: 0,
  pendingOrders: 0
});

onMounted(() => {
  loadShopInfo();
  loadStatistics();
});

const loadShopInfo = async () => {
  try {
    const res = await getUserShopAPI(useUserStore().userInfo.uid);
    if (res.code === 200) {
      shopData.value = res.data;
    } else {
      ElMessage.error('获取店铺信息失败');
    }
  } catch (error) {
    ElMessage.error('获取店铺信息失败: ' + error.message);
  }
};

const loadStatistics = async () => {
  try {
    // 先获取店铺信息
    const shopRes = await getUserShopAPI(useUserStore().userInfo.uid);
    if (shopRes.code === 200) {
      // 再获取统计数据
      const statRes = await getShopStatistics(shopRes.data.shopId);
      if (statRes.code === 200) {
        statistics.value = statRes.data;
      } else {
        ElMessage.error('获取统计数据失败');
      }
    }
  } catch (error) {
    ElMessage.error('获取统计数据失败: ' + error.message);
  }
};

const formatCurrency = (amount) => {
  return '¥' + amount.toFixed(2);
};
</script>

<template>
  <div class="UC_home">
    <div class="top">
      <el-row>
        <el-col :span="4">
          <img class="userImg" style="width: 120px;height: 120px" :src="shopData.shopAvatar || 'https://via.placeholder.com/120x120?text=店铺头像'" alt="店铺头像">
        </el-col>
        <el-col :span="18">
          <div class="userName">
            <span style="font-size: 24px;color: #11192d">{{ shopData.shopName || '未设置店铺名称' }}</span>&nbsp;
            <el-tag type="danger">金牌店主</el-tag>&nbsp;<br>
            <div style="color: #9b9b9b;line-height: 25px">
              <RegionFullText separator="-" v-model="shopData"/>&nbsp;
              <span>{{ shopData.address || '未设置详细地址' }}</span>
            </div>
            <div v-if="shopData.description" style="margin-top: 10px; color: #666;">
              {{ shopData.description }}
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row style="text-align: center;color: #121a2f">
        <el-col :span="5">
          <span style="font-size: 24px;">{{ statistics.totalProducts }}</span><br>
          <span style="font-size: 14px;">商品总数</span>
        </el-col>
        <el-col :span="5">
          <span style="font-size: 24px;">{{ statistics.pendingOrders }}</span><br>
          <span style="font-size: 14px;">待处理订单</span>
        </el-col>
        <el-col :span="5">
          <span style="font-size: 24px;">{{ statistics.totalOrders }}</span><br>
          <span style="font-size: 14px;">订单总数</span>
        </el-col>
        <el-col :span="5">
          <span style="font-size: 24px;">{{ formatCurrency(statistics.totalRevenue) }}</span><br>
          <span style="font-size: 14px;">总收入</span>
        </el-col>
      </el-row>
    </div>

    <div class="shop-details">
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>店铺信息</span>
          </div>
        </template>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="店铺名称">{{ shopData.shopName || '未设置' }}</el-descriptions-item>
          <el-descriptions-item label="店铺头像">
            <el-image
              style="width: 100px; height: 100px"
              :src="shopData.shopAvatar || 'https://via.placeholder.com/100x100?text=无头像'"
              fit="cover"
            ></el-image>
          </el-descriptions-item>
          <el-descriptions-item label="所在地区">
            <RegionFullText separator="-" v-model="shopData"/>
          </el-descriptions-item>
          <el-descriptions-item label="详细地址">{{ shopData.address || '未设置' }}</el-descriptions-item>
          <el-descriptions-item label="店铺描述">{{ shopData.description || '暂无描述' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="less">
.UC_home {
  width: 100%;
  max-width: 990px;
  min-height: 400px;
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
}

.top {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.el-row {
  margin-bottom: 20px;
}

.userImg {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.userName {
  span {
    font-size: 24px;
    color: #11192d;
    font-weight: 600;
  }
  
  .el-tag {
    margin-left: 10px;
  }
}

.userId {
  color: #9b9b9b;
  line-height: 25px;
}

.authRealName {
  float: right;
  font-size: 14px;
  color: #7c889c;
  cursor: pointer;
  transition: color 0.3s;
  
  &:hover {
    color: #007bff;
  }
}

.el-row[style*="text-align: center"] {
  .el-col {
    padding: 20px;
    border-radius: 8px;
    background-color: #f8f9fa;
    margin: 0 5px;
    transition: all 0.3s;
    
    &:hover {
      background-color: #e9ecef;
      transform: translateY(-2px);
    }
    
    span:first-child {
      font-size: 24px;
      font-weight: 600;
      color: #007bff;
      display: block;
      margin-bottom: 8px;
    }
    
    span:last-child {
      font-size: 14px;
      color: #6c757d;
    }
  }
}

.shop-details {
  margin-top: 30px;
  
  .detail-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    
    .card-header {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
}
</style>